<template>
	<view class="indexHeader">
		<u-navbar :placeholder="true">
			<template #left>
				<view @click="back">
					<u-icon name="arrow-left" size="20"></u-icon>
				</view>
			</template>
			<template #center>
				{{ title }}
			</template>
			<template #right>
				<view class=""  @click="toSearch">
					<uni-icons color="#000" size="22" type="search" />
				</view>
			
			</template>
		</u-navbar>
	</view>
	<view class="messageList">
		<view class="conversation-list" @scroll="onScroll">
		    <view v-if="connectionStatusDesc" style="text-align: center; padding: 5px 0">{{ connectionStatusDesc}}</view>
		    <uni-list :border="true" @scroll="onScroll">
		        <view
		            @click="showConversation(conversationInfo)"
		            v-for="conversationInfo in sharedConversationState.conversationInfoList"
		            :key="conversationInfoKey(conversationInfo)"
		            v-bind:class="{top:conversationInfo.top }"
		        >
		            <ConversationItemView v-if="conversationInfo.conversation.target!=='-e'" :conversation-info="conversationInfo" @longpress.native="showConversationContextMenu($event, conversationInfo)"/>
		        </view>
		    </uni-list>
		
		    <chunLei-popups v-model="showContextMenu" :popData="contextMenuItems" @tapPopup="onContextMenuItemSelect" :x="contextMenuX" :y="contextMenuY" direction="column" theme="dark" :triangle="false" dynamic/>
		    <main-action-menu ref="mainActionMenu"></main-action-menu>
		</view>
	</view>
</template>

<script>
	
import * as im from '@/common/im.js';
import ConversationItemView from "./ConversationItemView";
import wfc from "@/wfc/client/wfc";
import ConnectionStatus from "@/wfc/client/connectionStatus";
import store from "@/store";
	export default{
		data(){
			return{
				title:'招聘信息',
				imvalue:[],
				connectionStatusDesc:'',
				showContextMenu: false,
				contextMenuX: 0,
				contextMenuY: 0,
				contextMenuItems: [],
				imList:[{
					id:1,
					authUrl:'/static/images/boss.png',
					name:'张山',
					message:'你好我是什么什么',
					times:'22-10-01',
					isNew:true
				},
				{
					id:1,
					authUrl:'/static/images/boss.png',
					name:'张山',
					message:'你好我是什么什么你好我是什么什么你好我是什么什么',
					times:'22-10-01',
					isNew:false
				}
				]
			}
		},
		onLoad(option) {
			console.log(option)
			if(option){
				switch (option.type){
					case '1':
					this.title = '招聘信息'
					this.imFlag = 'recruitment'
					this.imvalue = ['e']
						break;
					case '2':
				this.title = '商家回复'
				this.imFlag = 'customerService'
				this.imvalue = ['d']
					break;
					case '3':
				this.title = '服务通知'
				this.imFlag = 'marketingCenter'
				this.imvalue = ['a','b','c']
					break;
					case '4':
				this.title = '互动消息'
				this.imFlag = ''
				this.imvalue = ''
					break;
					default:
						break;
				}
				console.log(this.title)
			}
		},
		onShow() {
		    console.log('conversationList onShow', this.sharedConversationState.conversationInfoList.length)
		},
		onHide(){
		    console.log('conversationList onHide');
		    this.$refs.mainActionMenu.hide();
		},
		onNavigationBarButtonTap(e) {
		    console.log('onNavigationBarButtonTap')
		    switch (e.index) {
		        case 0:
		            this.$refs.mainActionMenu.toggle();
		            break;
		        case 1:
		            this.$refs.mainActionMenu.hide();
		            uni.navigateTo({
		                url: '/pages/search/SearchPortalPage'
		            });
		            break;
		        default:
		            break;
		    }
		},
		methods:{
			toSearch(){},
			back(){
				uni.navigateBack()
			},
			go2ConversationPage(){
				let pages = getCurrentPages();
				let cvRoute = 'pages/im/conversation/ConversationPage'
				let delta = 0;
				let found = false;
				for (let i = pages.length - 1; i >= 0; i--) {
					if (pages[i].route === cvRoute) {
						found = true;
						break;
					} else {
						delta++;
					}
				}
				if (found) {
					uni.navigateBack({
						delta: delta,
						fail: err => {
							console.log('nav back to conversationView err', err);
						}
					});
				} else {
					uni.navigateTo({
						url: '/pages/im/conversation/ConversationPage',
						success: () => {
							console.log('nav to conversationPage success');
			
						},
						fail: (err) => {
							console.log('nav to conversationPage err', err);
						}
					})
				}
			},
			clearNoready(){},
			showConversation(conversationInfo) {
			    store.setCurrentConversationInfo(conversationInfo);
				this.go2ConversationPage()
			},
			
			removeConversation(conversationInfo) {
			    store.removeConversation(conversationInfo.conversation);
			},
			
			conversationInfoKey(conversationInfo) {
			    let conv = conversationInfo.conversation;
			    return conv.target + '-' + conv.type + '-' + conv.line;
			},
			scrollActiveElementCenter() {
			    let el = this.$el.getElementsByClassName("active")[0];
			    el && el.scrollIntoView({behavior: "instant", block: "center"});
			},
			
			onScroll() {
			    // TODO
			},
			
			showConversationContextMenu(e, conversationInfo) {
			    this.contextMenuX = e.touches[0].clientX;
			    this.contextMenuY = e.touches[0].clientY;
			    this.contextMenuItems = [];
			
			    this.contextMenuItems.push({
			        title: conversationInfo.top ? '取消置顶' : '置顶',
			        tag: 'top',
			        conversationInfo: conversationInfo,
			    })
			
			    this.contextMenuItems.push({
			        title: conversationInfo.isSilent ? '取消静音' : '静音',
			        tag: 'silent',
			        conversationInfo: conversationInfo,
			    })
			
			    this.contextMenuItems.push({
			        title: '删除会话',
			        tag: 'delete',
			        conversationInfo: conversationInfo,
			    })
			
			    this.contextMenuItems.push({
			        title: conversationInfo._unread === 0 ? '标记为未读' : '标记为已读',
			        tag: 'mark',
			        conversationInfo: conversationInfo,
			    })
			    this.showContextMenu = true;
			
			},
			
			onContextMenuItemSelect(t) {
			    switch (t.tag) {
			        case 'delete':
			            store.removeConversation(t.conversationInfo.conversation);
			            break;
			        case 'top':
			            store.setConversationTop(t.conversationInfo.conversation, t.conversationInfo.top > 0 ? 0 : 1);
			            break;
			        case 'silent':
			            store.setConversationSilent(t.conversationInfo.conversation, !t.conversationInfo.isSilent);
			            break;
			        case 'mark':
			            let conversation = t.conversationInfo.conversation;
			            if (t.conversationInfo._unread === 0) {
			                wfc.markConversationAsUnread(conversation, true);
			            } else {
			                wfc.clearConversationUnreadStatus(conversation);
			            }
			            break;
			        default:
			            uni.showToast({
			                title: 'TODO ' + t.title,
			                icon: 'none'
			            })
			            break;
			
			    }
			}
		},
		activated() {
		    this.scrollActiveElementCenter();
		},
		
		computed: {
			sharedConversationState(){
				return {
					conversationInfoList:store.state.conversation.conversationInfoList.filter(item => this.imvalue.includes(item.conversation.target.split('-')[1]))
				};
			},
		},
		components: {
		    ConversationItemView,
		},
	}
</script>

<style>
	
/deep/.uni-list-chat__header{
	height: 52px!important;
	width: 52px!important;
}	
/deep/ .uni-list-chat__container{
	padding: 22px!important;
}
</style>